<template>
    <div>
        <Card :bordered="false"
              dis-hover
              class="ivu-mt">
            <!-- 自定义筛选项 start  -->
            <table-form :dynamicData="dynamicData"
                        @on-submit="getData"
                        @on-reset="getData">
                <!-- <itemData slot='header' :itemData="item.data" :formData="formData" v-bind:is="item.fileName" @handleChangeFormData="handleChangeFormData"></component> -->
                <div v-if="!!dynamicData.formSlots">
                    <div v-for="(item, index) in dynamicData.formSlots"
                         :key="index"
                         :slot="item.slotName">
                        <async-load-comp :asyncData="item.slotData" />
                    </div>
                </div>
            </table-form>
            <!-- 自定义筛选项 end  -->
        </Card>
        <Card :bordered="false"
              dis-hover
              class="ivu-mt">
            <!-- 调用表格子组件 start  -->
            <table-list :dynamicData="dynamicData"
                        :pagePath="pagePath"
                        ref="table" />
            <!-- 调用表格子组件 end  -->
        </Card>
    </div>
</template>
<script>
    import { mapState, mapMutations } from 'vuex';
    import tableForm from '@/components/common/baseForm'; // 表单组件
    import tableList from '@/components/common/baseTable'; // 表格组件

    import asyncLoadComp from '@/components/common/asyncLoadComp'; // 动态导入组件

    export default {
        components: {
            tableForm,
            tableList,
            asyncLoadComp
        },
        data () {
            return {
                dynamicData: {},
                pagePath: '' // 当前路由
            }
        },
        computed: {
            ...mapState('admin/baseList', [
                'listData',
                'formItemData',
                'formItemDataRules'
            ])
        },
        watch: {
            '$route': function () {
                this.$nextTick(() => {
                    this.$router.go(0);
                })
            }
        },
        created () {
            this.getConfigData();
        },
        mounted () {
            this.getData();
        },
        methods: {
            ...mapMutations('admin/baseList', [
                'setListData',
                'setFormItemData',
                'setFormItemDataRules'
            ]),
            // 获取表格数据
            getData (formData) {
                this.$refs.table.getData(formData);
            },
            // 获取初始配置信息
            getConfigData () {
                this.pagePath = this.$route.path;
                let dynamicData = require('@/configFile/product/baseList/index').default[this.$route.path];
                this.$set(this.$data, 'dynamicData', dynamicData);
                this.setListData(dynamicData)
                this.setFormItemData(dynamicData.formData)
                this.setFormItemDataRules(dynamicData.formDataRules)
            }
        }
    }
</script>
